
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/10.css" />
    <link rel="stylesheet" href="/css/11.css" />
    <link rel="stylesheet" href="/css/12.css" />


    <style>
        .box {
            left: 10%;
            width: 1200px;
            height: 230px;
            margin: 0 auto;
            overflow: hidden;
            border: 1px solid rgb(255, 255, 255);
            position: absolute;
            top: 1350px;
        }

        .imgList {
            animation:rolling 48s linear infinite;
            position: absolute;
            display: flex;
        }

        .img1 {
            height: 150px;
            float: left;
            margin-right: 10px;
        }
        @keyframes rolling {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(-50%);
            }
        }
        .box :hover{

            animation-play-state: paused;
        }


    </style>




</head>

<body>







<!--头部开始-->
<div class="header">
    <div class="wrap">
        <ul class="header-left">
            <li>欢迎来到某某国际物流公司!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li><a>登录</a><span>|</span></li>
            <li><a>注册</a></li>

        </ul>
        <ul class="header-right">
            <li><img src="image/psdy.png" width="18px">24小时热线:400-1234-XXXX&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li><a href="#">设为首页</a><span>|</span></li>
            <li><a href="#">加入收藏</a></li>
        </ul>
    </div>
</div>
<!--头部结束-->
<!--导航开始-->
<div class="nav">
    <div class="wrap">
        <div class="logo">
            <img src="image/5ay2.png">
        </div>
        <div class="brand">
            <ul>
                <li>某某国际物流有限公司</li>
                <li style="font-size: 10px;">MARINE LOGISTICS CO LTD</li>
            </ul>
        </div>
        <div class="nav-bar">
            <ul>
                <li><a href="/page1">首页</a></li>
                <li><a href="/page2">关于我们</a></li>
                <li><a href="/page3">业务范围</a></li>
                <li><a href="/page6">新闻中心</a></li>
                <li><a href="/page8">网上下单</a></li>
                <li><a href="/page11">联系我们</a></li>
            </ul>
        </div>
    </div>
</div>
<!--导航结束-->
<div class="demo01" style="background-image: url(/image/map-background.jpeg)"></div>
<div class="demo02" style="background: rgba(249,249,249,0.5);">
    <div class="day1" style="float: left;width: 35%;height: 60px">
        <a href="/page1" style="font-family: 微软雅黑;font-size: 13px;color: black;text-decoration: none;display: block;padding-top: 20px;padding-left: 100px;float: left">首页</a>
        <p style="font-family: 微软雅黑;font-size: 13px;color: black;float: left;padding-top: 20px">&nbsp;>>&nbsp;关于我们</p>
    </div>
    <div class="day2" style="float: left;width: 65%;height: 60px;">
        <ul>
            <c:forEach begin="0" end="${businessClasses.size()-1}" var="i">

                <li style="float: left;list-style: none;margin-left: 30px;"><a href="/page3?businessClassId=${businessClasses[i].id}" style="display:block;width:120px;height:60px;text-decoration: none;color: #100f0f;font-family: 微软雅黑"><span style="position:relative;top: 18px;left: 18px;">${businessClasses[i].name}</span></a></li>

            </c:forEach>
        </ul>

    </div>
</div>

    <div class="dierbufen">
        <div class="tupian_3">
            <div class="tupian_4">
                <c:forEach items="${secondImages}" var="secondImage">
                    <img class="img1" src="${secondImage.img}">
                </c:forEach>
            </div>
        </div>
        <script>
            window.onload=function(){
                let swiperContainer = document.getElementsByClassName('tupian_3')[0];
                let wrap=document.getElementsByClassName("tupian_4")[0];
                let wrapImg = document.getElementsByClassName("tupian_4")[0].getElementsByTagName('img')
                //获取屏幕的宽度
                let windowWidth = wrapImg.width;
                let wrapImgLeng = wrapImg.length;
                let timer=null;
                let index = -1;
                //屏幕宽度
                for(let i = 0 ;i < wrapImgLeng;i++){
                    wrapImg[i].style.width = windowWidth +'px'
                }
                swiperContainer.onmouseenter = function () {
                    clearInterval(timer);
                }
                swiperContainer.onmouseleave = function () {
                    swiper(timer);
                }
                //淡入淡出效果，用的是层级的一个循环
                function swiper(){
                    clearInterval(timer);
                    opacity=1;
                    if(++index == wrapImgLeng){
                        index=0;
                    }
                    for(let i=0;i<wrapImgLeng;i++){
                        wrapImg[i].style.opacity=1;
                        if(index!=i){
                            wrapImg[i].style.zIndex=1;
                        }
                    }
                    timer=setInterval(function(){
                        if(opacity<=0){
                            clearInterval(timer);
                            setTimeout(function(){
                                swiper();
                            },3000);
                        }
                        opacity -=0.01;
                        console.log(index)
                        wrapImg[index].style.zIndex=3;
                        wrapImg[index].style.opacity=opacity;
                        if(index == wrapImgLeng -1){
                            wrapImg[0].style.zIndex=2;
                        }else{
                            wrapImg[index+1].style.zIndex=2;
                        }
                    },30);
                }
                swiper();
            }




        </script>
    </div>
    <div class="wenzineirong">
        <ul class="wdfgh">
            <li class="text_1">我们公司已经提供货运服务二十年了，到现在为止，已经成功积累了自己的所有权</li>
            <br>
            <li class="text_2">我们的业务运营着一支由拖船、油轮、承运人和工作船组成的船队。</li>
            <br><br><br>
            <li class="text_3">中国*****总公司（****）成立于1980年4月，是中国较早成立的全国性专业外贸公司之一。经过多年的诚信经营，公司已与全世界142个国家、地区建立了广泛的业务合作关系，为中国的改革开放和中国电子工业的发展做出了重要贡献。公司具有国际贸易、国际工程承包、招标代理、展览广告等多种业务的**经营资质。截至2009年底，公司总资产达142.56亿元人民币，实现销售收入142.45亿元人民币，业务范围涉及国际贸易、海外工程、防务电子、船舶业务、招标业务、展览广告及现代物流等多个领域。

                国际贸易是公司的传统主营业务。截至2009年底，累计进出口额达451.2亿美元。公司是商务部认定的A类援外物资企业，并已连续两年成为中国政府援外项目中机电产品类援外项目的**名。</li>

        </ul>
    </div>
</div>
<div class="disanbufen">
    <div class="safasfas">
        <ul class="sfgafg">
            <li class="fsafasf">立即预约服务</li>
            <br>
            <li class="fsaffs">无论你的货物的较终目的地是什么，我们可以为您做的更好，致力于准时到达，甚至更快！多年来，我们公司的诚信为我们提供了可靠的信誉，具备了成熟的服务能力。

                准点发车、准点到达、保证低价、全程高速，安全、快速、送货及时。</li>
            <li class="fasfaswg"><a class="kcvdgi" href="/page8">立即预约</a></li>
        </ul>



    </div>
    <script>

        var safasfas = document.querySelector(".safasfas");
        //用js检测鼠标滚轮距离顶部位置来给div添加动画
        window.onscroll = function() {
            //检测鼠标滚轮距离顶部位置
            var top = document.documentElement.scrollTop || document.body.scrollTop;
            console.log(top);
            //要设置到DIV显示出来时给div添加动画 也可以设置一个数值只要保证div出来给它加动画即可
            if(top > (safasfas.offsetTop - safasfas.offsetHeight)) {
                safasfas.style.animation = "key 2s linear 1" //添加动画

            }
        }
    </script>
</div>



<div class="disibufen">
    <div class="">
        <ul>
            <li class="sfasfsaf">我们的使命声明</li>
            <br>
            <li class="gdagadga">我们坚信，将贸易世界联系在一起的质量和重要性。

                我们的目标是为世界各地的海洋建筑和维护行业提供**、有效和可靠的服务。</li>
        </ul>
    </div>
</div>
<div class="box">
    <div class="imgList">
        <c:forEach items="${businesses}" var="business">
            <a href="/page4?id=${business.id}">
                <img style="width: 350px;padding: 20px" src="${business.img}">
            </a>
        </c:forEach>


    </div>
</div>






<div class="dibu">
    <div class="dibuwenzi">
        <div>
            <ul>
                <li class="khghdfgdfgd"><img src="http://tpl-ce154ff.pic24.websiteonline.cn/upload/5ay2.png"></li>
                <li class="fsafsafasfqwe">某某国际物流有限公司</li>
                <li class="vbcvbxcvdv">MARINE LOGISTICS CO., LTD.</li>
                <li class="xuzhcsiu"><input type="text/css"></input></li>
                <li class="sdasfa_1"><button >搜索</button></li>
                <li class="sdasfa_2">某某国际物流有限公司是集代理、物流配送、航空速递、公路运输、铁路运</li>
                <li class="sdasfa_3">输、仓储、城际配送于一体，跨区域、网络化、信息化、智能化、具有供应</li>
                <li class="sdasfa_4">链管理能力的综合性物流公司。</li>
                <li class="sdasfa_5">联系方式</li>
                <li class="sdasfa_6">021-123456X</li>
                <li class="sdasfa_7">地址：上海市某某区某某路某某大厦x楼 xx号</li>
                <li class="sdasfa_8">邮箱：xxxxxx@126com</li>
                <li class="sdasfa_9">手机：123 xxxx xxxx</li>
                <li class="sdasfa_10">网址 ：www.xxxxxxxxx.com</li>
                <li class="sdasfa_11">微信</li>
                <li class="sdasfa_12">官方公众平台</li>
                <li class="sdasfa_13"><img src="https://tpl-ce154ff-pic24.websiteonline.cn/upload/5z08.jpg"></li>
                <li class="sdasfa_14"><img src=""></li>
                <li class="sdasfa_15"><img src=""></li>
                <li class="sdasfa_16"><img src=""></li>
                <li class="sdasfa_17"><img src=""></li>
                <li class="sdasfa_18"><img src=""></li>
                <li class="sdasfa_19"><img src=""></li>


            </ul>
        </div>
    </div>

</div>
<div class="dibu_1">
    <ul>
        <li class="qasdsfxcsffsf">Copyright 2017 www.xxxxxxx.com All Right Reserved.  版权所有 某某国际物流有限公司   网站备案：ICP备123456789XXX号</li>
    </ul>

</div>



</div>




</div>
</body>
</html>